<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 待办事项管理系统</title>
    <link rel="stylesheet" href="css/navbar.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .main-content {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }

        .welcome-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .welcome-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #4a5568;
            margin-bottom: 15px;
        }

        .welcome-subtitle {
            font-size: 1.2rem;
            color: #718096;
            margin-bottom: 20px;
        }

        .stats-summary {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .stat-item {
            text-align: center;
            padding: 15px 25px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 10px;
            min-width: 120px;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.9rem;
            color: #718096;
            font-weight: 500;
        }

        .categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .category-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .category-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .category-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--category-color), var(--category-color-light));
        }

        .category-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            display: block;
        }

        .category-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #4a5568;
            margin-bottom: 15px;
        }

        .category-description {
            color: #718096;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .category-stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 25px;
        }

        .category-stat {
            text-align: center;
        }

        .category-stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--category-color);
            margin-bottom: 5px;
        }

        .category-stat-label {
            font-size: 0.8rem;
            color: #718096;
        }

        .view-btn {
            background: linear-gradient(135deg, var(--category-color), var(--category-color-light));
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
        }

        .view-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        /* 分类颜色主题 */
        .category-life {
            --category-color: #48bb78;
            --category-color-light: #38a169;
            background-image: url('img/2.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
            z-index: 1;
        }
        .category-life::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255,255,255,0.85);
            z-index: 2;
        }
        .category-life > * { position: relative; z-index: 3; }

        .category-entertainment {
            --category-color: #ed8936;
            --category-color-light: #dd6b20;
            background-image: url('img/1.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
            z-index: 1;
        }
        .category-entertainment::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255,255,255,0.85);
            z-index: 2;
        }
        .category-entertainment > * { position: relative; z-index: 3; }

        .category-study {
            --category-color: #4299e1;
            --category-color-light: #3182ce;
            background-image: url('img/3.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
            z-index: 1;
        }
        .category-study::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255,255,255,0.85);
            z-index: 2;
        }
        .category-study > * { position: relative; z-index: 3; }

        .category-game {
            --category-color: #9f7aea;
            --category-color-light: #805ad5;
            background-image: url('img/4.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
            z-index: 1;
        }
        .category-game::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255,255,255,0.85);
            z-index: 2;
        }
        .category-game > * { position: relative; z-index: 3; }

        .quick-actions {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .quick-actions h2 {
            font-size: 1.8rem;
            font-weight: 700;
            color: #4a5568;
            margin-bottom: 20px;
            text-align: center;
        }

        .actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .action-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 20px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            text-align: center;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        @media (max-width: 768px) {
            .welcome-title {
                font-size: 2rem;
            }

            .categories-grid {
                grid-template-columns: 1fr;
            }

            .stats-summary {
                gap: 15px;
            }

            .stat-item {
                min-width: 100px;
                padding: 10px 15px;
            }
        }

        .category-life, .category-entertainment, .category-study, .category-game {
            /* 让卡片内容更突出 */
        }
        .category-life .category-title,
        .category-life .category-description,
        .category-life .category-stat-number,
        .category-life .category-stat-label,
        .category-life .view-btn {
            color: #22543d !important;
            text-shadow: 0 2px 8px rgba(255,255,255,0.5);
        }
        .category-entertainment .category-title,
        .category-entertainment .category-description,
        .category-entertainment .category-stat-number,
        .category-entertainment .category-stat-label,
        .category-entertainment .view-btn {
            color: #7b341e !important;
            text-shadow: 0 2px 8px rgba(255,255,255,0.5);
        }
        .category-study .category-title,
        .category-study .category-description,
        .category-study .category-stat-number,
        .category-study .category-stat-label,
        .category-study .view-btn {
            color: #1a365d !important;
            text-shadow: 0 2px 8px rgba(255,255,255,0.5);
        }
        .category-game .category-title,
        .category-game .category-description,
        .category-game .category-stat-number,
        .category-game .category-stat-label,
        .category-game .view-btn {
            color: #44337a !important;
            text-shadow: 0 2px 8px rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <!-- 统一导航栏 -->
    <nav class="navbar">
        <div class="navbar-content">
            <a href="home.html" class="navbar-brand">
                <span class="brand-icon">🏠</span>
                <h1>待办事项管理系统</h1>
            </a>
            
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="home.html" class="nav-link active">
                        <span class="nav-icon">🏠</span>
                        首页
                    </a>
                </li>
                <li class="nav-item">
                    <a href="user_index.html" class="nav-link">
                        <span class="nav-icon">📋</span>
                        待办事项
                    </a>
                </li>
                <li class="nav-item">
                    <a href="profile.html" class="nav-link">
                        <span class="nav-icon">👤</span>
                        个人信息
                    </a>
                </li>
            </ul>
            
            <div class="user-section">
                <div class="user-info">
                    <div class="user-avatar" id="userAvatar">U</div>
                    <span class="user-name" id="userName">用户</span>
                </div>
                <button class="logout-btn" id="logoutBtn">
                    <span>🚪</span>
                    退出登录
                </button>
            </div>
        </div>
    </nav>

    <div class="main-content">
        <div class="welcome-section">
            <h2 class="welcome-title" id="welcomeTitle">欢迎回来！</h2>
            <p class="welcome-subtitle">选择您想要管理的待办事项分类</p>
            <div class="stats-summary">
                <div class="stat-item">
                    <div class="stat-number" id="totalTodos">0</div>
                    <div class="stat-label">总待办事项</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="completedTodos">0</div>
                    <div class="stat-label">已完成</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="pendingTodos">0</div>
                    <div class="stat-label">进行中</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="overdueTodos">0</div>
                    <div class="stat-label">已逾期</div>
                </div>
            </div>
        </div>

        <div class="categories-grid">
            <div class="category-card category-life" onclick="viewCategory('生活')">
                <span class="category-icon">🏠</span>
                <h3 class="category-title">生活</h3>
                <p class="category-description">管理日常生活中的各种事务，包括家务、购物、健康等</p>
                <div class="category-stats">
                    <div class="category-stat">
                        <div class="category-stat-number" id="lifeTotal">0</div>
                        <div class="category-stat-label">总数</div>
                    </div>
                    <div class="category-stat">
                        <div class="category-stat-number" id="lifeCompleted">0</div>
                        <div class="category-stat-label">已完成</div>
                    </div>
                </div>
                <button class="view-btn">查看详情</button>
            </div>

            <div class="category-card category-entertainment" onclick="viewCategory('娱乐')">
                <span class="category-icon">🎬</span>
                <h3 class="category-title">娱乐</h3>
                <p class="category-description">安排休闲娱乐活动，包括电影、音乐、旅行等</p>
                <div class="category-stats">
                    <div class="category-stat">
                        <div class="category-stat-number" id="entertainmentTotal">0</div>
                        <div class="category-stat-label">总数</div>
                    </div>
                    <div class="category-stat">
                        <div class="category-stat-number" id="entertainmentCompleted">0</div>
                        <div class="category-stat-label">已完成</div>
                    </div>
                </div>
                <button class="view-btn">查看详情</button>
            </div>

            <div class="category-card category-study" onclick="viewCategory('学习')">
                <span class="category-icon">📚</span>
                <h3 class="category-title">学习</h3>
                <p class="category-description">管理学习计划和任务，包括课程、阅读、技能提升等</p>
                <div class="category-stats">
                    <div class="category-stat">
                        <div class="category-stat-number" id="studyTotal">0</div>
                        <div class="category-stat-label">总数</div>
                    </div>
                    <div class="category-stat">
                        <div class="category-stat-number" id="studyCompleted">0</div>
                        <div class="category-stat-label">已完成</div>
                    </div>
                </div>
                <button class="view-btn">查看详情</button>
            </div>

            <div class="category-card category-game" onclick="viewCategory('游戏')">
                <span class="category-icon">🎮</span>
                <h3 class="category-title">游戏</h3>
                <p class="category-description">安排游戏时间和目标，包括游戏攻略、成就收集等</p>
                <div class="category-stats">
                    <div class="category-stat">
                        <div class="category-stat-number" id="gameTotal">0</div>
                        <div class="category-stat-label">总数</div>
                    </div>
                    <div class="category-stat">
                        <div class="category-stat-number" id="gameCompleted">0</div>
                        <div class="category-stat-label">已完成</div>
                    </div>
                </div>
                <button class="view-btn">查看详情</button>
            </div>
        </div>

        <div class="quick-actions">
            <h2>快速操作</h2>
            <div class="actions-grid">
                <a href="user_index.html" class="action-btn">
                    <span>📋</span>
                    查看所有待办事项
                </a>
                <button class="action-btn" onclick="openAddModal()">
                    <span>➕</span>
                    添加新待办事项
                </button>
                <a href="profile.html" class="action-btn">
                    <span>👤</span>
                    个人信息设置
                </a>
                <button class="action-btn" onclick="logout()">
                    <span>🚪</span>
                    退出登录
                </button>
            </div>
        </div>
    </div>

    <script src="js/navbar.js"></script>
    <script>
        let allTodos = [];

        // 页面加载时加载数据
        document.addEventListener('DOMContentLoaded', function() {
            // 导航栏已经通过navbar.js初始化
            loadTodoStats();
        });

        // 加载待办事项统计数据
        function loadTodoStats() {
            const currentUser = window.navbar.getCurrentUser();
            if (!currentUser || !currentUser.userId) {
                console.error('用户未登录或用户ID无效');
                return;
            }

            fetch(`/api/todos/user/${currentUser.userId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取数据失败');
                    }
                    return response.json();
                })
                .then(todos => {
                    allTodos = todos;
                    updateStats(todos);
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        // 更新统计数据
        function updateStats(todos) {
            const now = new Date();
            
            // 总体统计
            const total = todos.length;
            let completed = 0;
            let pending = 0;
            let overdue = 0;

            // 分类统计
            const categoryStats = {
                '生活': { total: 0, completed: 0 },
                '娱乐': { total: 0, completed: 0 },
                '学习': { total: 0, completed: 0 },
                '游戏': { total: 0, completed: 0 }
            };

            todos.forEach(todo => {
                const deadline = new Date(todo.dueDate);
                
                if (todo.status === '已完成') {
                    completed++;
                } else if (todo.status === '进行中') {
                    if (deadline < now) {
                        overdue++;
                    } else {
                        pending++;
                    }
                }

                // 根据标题或内容判断分类
                const category = getTodoCategory(todo);
                if (categoryStats[category]) {
                    categoryStats[category].total++;
                    if (todo.status === '已完成') {
                        categoryStats[category].completed++;
                    }
                }
            });

            // 更新总体统计
            document.getElementById('totalTodos').textContent = total;
            document.getElementById('completedTodos').textContent = completed;
            document.getElementById('pendingTodos').textContent = pending;
            document.getElementById('overdueTodos').textContent = overdue;

            // 更新分类统计
            document.getElementById('lifeTotal').textContent = categoryStats['生活'].total;
            document.getElementById('lifeCompleted').textContent = categoryStats['生活'].completed;
            document.getElementById('entertainmentTotal').textContent = categoryStats['娱乐'].total;
            document.getElementById('entertainmentCompleted').textContent = categoryStats['娱乐'].completed;
            document.getElementById('studyTotal').textContent = categoryStats['学习'].total;
            document.getElementById('studyCompleted').textContent = categoryStats['学习'].completed;
            document.getElementById('gameTotal').textContent = categoryStats['游戏'].total;
            document.getElementById('gameCompleted').textContent = categoryStats['游戏'].completed;
        }

        // 根据待办事项内容判断分类
        function getTodoCategory(todo) {
            const title = todo.title.toLowerCase();
            const content = todo.content ? todo.content.toLowerCase() : '';
            const text = title + ' ' + content;

            // 生活类关键词
            if (text.includes('家务') || text.includes('打扫') || text.includes('洗衣服') || 
                text.includes('做饭') || text.includes('购物') || text.includes('买菜') ||
                text.includes('健康') || text.includes('运动') || text.includes('锻炼') ||
                text.includes('医院') || text.includes('体检') || text.includes('生活')) {
                return '生活';
            }
            
            // 娱乐类关键词
            if (text.includes('电影') || text.includes('电视剧') || text.includes('音乐') ||
                text.includes('旅行') || text.includes('旅游') || text.includes('聚会') ||
                text.includes('娱乐') || text.includes('休闲') || text.includes('放松')) {
                return '娱乐';
            }
            
            // 学习类关键词
            if (text.includes('学习') || text.includes('读书') || text.includes('课程') ||
                text.includes('考试') || text.includes('作业') || text.includes('复习') ||
                text.includes('技能') || text.includes('培训') || text.includes('知识')) {
                return '学习';
            }
            
            // 游戏类关键词
            if (text.includes('游戏') || text.includes('打游戏') || text.includes('攻略') ||
                text.includes('成就') || text.includes('等级') || text.includes('副本')) {
                return '游戏';
            }

            // 默认分类为生活
            return '生活';
        }

        // 查看分类详情
        function viewCategory(category) {
            // 将分类信息存储到localStorage，然后跳转到待办事项页面
            localStorage.setItem('selectedCategory', category);
            window.location.href = 'user_index.html';
        }

        // 打开添加待办事项模态框
        function openAddModal() {
            // 跳转到待办事项页面并打开添加模态框
            localStorage.setItem('openAddModal', 'true');
            window.location.href = 'user_index.html';
        }

        // 退出登录
        function logout() {
            window.navbar.logout();
        }
    </script>
</body>
</html> 